<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王子浩 - 个人简历</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            color: #333;
            background-color: #f8f9fa;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, #1a5276, #3498db);
            color: white;
            padding: 40px 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .profile-photo {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 5px solid white;
            object-fit: cover;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 15px;
        }
        
        .contact-info {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 15px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 40px;
            margin-top: -50px;
            position: relative;
        }
        
        .sidebar {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            position: sticky;
            top: 20px;
            height: fit-content;
        }
        
        .main-section {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        }
        
        h2 {
            color: #1a5276;
            margin-bottom: 20px;
            font-size: 1.8rem;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
        }
        
        h3 {
            color: #2874a6;
            margin: 20px 0 15px 0;
            font-size: 1.4rem;
        }
        
        .section {
            margin-bottom: 30px;
        }
        
        ul {
            list-style-position: inside;
            margin-left: 15px;
        }
        
        li {
            margin-bottom: 10px;
            line-height: 1.8;
        }
        
        .skill-item {
            margin-bottom: 15px;
        }
        
        .skill-name {
            font-weight: 600;
            margin-bottom: 5px;
            display: block;
        }
        
        .skill-bar {
            width: 100%;
            height: 10px;
            background-color: #ecf0f1;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .skill-progress {
            height: 100%;
            background: linear-gradient(to right, #3498db, #1a5276);
            border-radius: 5px;
        }
        
        .project {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ecf0f1;
        }
        
        .project:last-child {
            border-bottom: none;
        }
        
        .project-title {
            font-weight: 600;
            color: #2874a6;
            font-size: 1.2rem;
            margin-bottom: 8px;
        }
        
        .project-description {
            margin-top: 10px;
            color: #555;
        }
        
        .tag {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            margin-right: 8px;
            margin-bottom: 8px;
        }
        
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .sidebar {
                position: static;
            }
            
            .contact-info {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .profile-photo {
                width: 150px;
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <img src="Class_1/3983ccd6b5a9afa65ce960cc09c3246c.png" alt="王子浩" class="profile-photo">
            <h1>王子浩</h1>
            <p class="subtitle">21岁 | 计算机科学与技术专业 | 班长</p>
            <div class="contact-info">
                <div class="contact-item">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 7H13V13H11V7ZM11 15H13V17H11V15Z" fill="white"/>
                    </svg>
                    <span>湖南农业大学</span>
                </div>
                <div class="contact-item">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20.57 14.86L22 13.43L20.57 12L17 15.57L8.43 7L12 3.43L10.57 2L9.14 3.43L7.71 2L5.57 4.14L4.14 2.71L2.71 4.14L4.14 5.57L2 7.71L3.43 9.14L2 10.57L3.43 12L7 8.43L15.57 17L12 20.57L13.43 22L14.86 20.57L16.29 22L18.43 19.86L19.86 21.29L21.29 19.86L19.86 18.43L22 16.29L20.57 14.86Z" fill="white"/>
                    </svg>
                    <span>信息与智能科学技术学院</span>
                </div>
            </div>
        </div>
    </header>
    
    <div class="container">
        <div class="main-content">
            <div class="sidebar">
                <div class="section">
                    <h2>个人信息</h2>
                    <ul>
                        <li><strong>姓名：</strong>王子浩</li>
                        <li><strong>年龄：</strong>21岁</li>
                        <li><strong>班级：</strong>23级计算机2班</li>
                        <li><strong>职位：</strong>班长</li>
                        <li><strong>学校：</strong>湖南农业大学</li>
                        <li><strong>学院：</strong>信息与智能科学技术学院</li>
                    </ul>
                </div>
                
                <div class="section">
                    <h2>技术技能</h2>
                    <div class="skill-item">
                        <span class="skill-name">Linux系统</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <span class="skill-name">C++开发</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 80%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <span class="skill-name">Qt框架</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 75%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <span class="skill-name">Git版本控制</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <span class="skill-name">Docker容器化</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 70%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <span class="skill-name">高并发服务器开发</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 75%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <span class="skill-name">MySQL数据库</span>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 80%;"></div>
                        </div>
                    </div>
                </div>
                
                <div class="section">
                    <h2>工具熟练程度</h2>
                    <div class="tags">
                        <span class="tag">VS Code</span>
                        <span class="tag">Qt Creator</span>
                        <span class="tag">Git</span>
                        <span class="tag">Docker</span>
                        <span class="tag">Ubuntu</span>
                        <span class="tag">Windows</span>
                        <span class="tag">CMake</span>
                    <span class="tag">GDB</span>
                    <span class="tag">MySQL</span>
                    </div>
                </div>
            </div>
            
            <div class="main-section">
                <div class="section">
                    <h2>个人简介</h2>
                    <p>我是王子浩，一名热爱计算机科学与技术的21岁大学生，现任湖南农业大学信息与智能科学技术学院23级计算机2班班长。我对编程和系统开发有着浓厚的兴趣，尤其擅长Linux环境下的C++开发和Windows环境下的Qt应用程序开发。</p>
                    <p>作为班长，我具备优秀的团队协作能力和组织管理能力，能够有效地协调团队成员完成各项任务。同时，我注重学习和掌握最新的技术知识，不断提升自己的专业技能。</p>
                    <p>我熟悉各种企业级开发工具和环境，包括Git版本控制、Docker容器化技术等，能够适应现代软件开发的需求。我渴望在实践中不断成长，挑战自我，为未来的职业发展打下坚实的基础。</p>
                </div>
                
                <div class="section">
                    <h2>项目经验</h2>
                    
                    <div class="project">
                        <div class="project-title">仿Mudou库高并发服务器实现</div>
                        <div class="tags">
                            <span class="tag">C++</span>
                            <span class="tag">Linux</span>
                            <span class="tag">高并发</span>
                            <span class="tag">网络编程</span>
                        </div>
                        <div class="project-description">
                            <p><strong>项目简介：</strong>基于C++语言在Ubuntu环境下实现的高性能网络库，参考Muduo库的设计理念，实现了基于事件驱动的非阻塞I/O模型。</p>
                            <ul>
                                <li>采用Reactor模式设计，实现了高效的事件循环机制</li>
                                <li>基于Epoll进行IO多路复用，支持高并发连接处理</li>
                                <li>实现了线程池、定时器、缓冲区等核心组件</li>
                                <li>提供了简单易用的TCP服务器框架，支持用户自定义业务逻辑</li>
                                <li>通过性能测试，能够高效处理数千并发连接</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="project">
                        <div class="project-title">Qt即时通讯录应用</div>
                        <div class="tags">
                            <span class="tag">Qt</span>
                            <span class="tag">C++</span>
                            <span class="tag">Windows</span>
                            <span class="tag">数据库</span>
                        </div>
                        <div class="project-description">
                            <p><strong>项目简介：</strong>使用Qt框架开发的桌面即时通讯应用，支持联系人管理、消息发送接收等功能。</p>
                            <ul>
                                <li>使用Qt Widgets构建友好的用户界面，支持皮肤切换</li>
                                <li>基于SQLite数据库存储联系人信息和聊天记录</li>
                                <li>实现了用户认证、联系人分组管理功能</li>
                                <li>支持文本消息、文件传输等多种通讯方式</li>
                                <li>采用多线程设计，确保界面响应流畅</li>
                                <li>实现了消息加密传输，保障通讯安全</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="section">
                    <h2>技能拓展</h2>
                    <h3>系统开发能力</h3>
                    <p>在Linux环境下，我能够熟练使用命令行工具进行系统管理和开发，包括shell脚本编写、系统调优、服务配置等。我深入理解Linux内核原理，掌握进程管理、内存管理、文件系统等核心概念，能够开发高性能的系统应用程序。</p>
                    
                    <h3>编程能力</h3>
                    <p>我精通C++语言，熟悉STL标准库，能够编写高效、安全、可维护的代码。我了解面向对象编程思想，能够设计合理的类层次结构和接口。此外，我还学习过Python、Java等编程语言，具备跨语言开发的能力。</p>
                    
                    <h3>数据库技能</h3>
                    <p>我精通MySQL数据库，能够设计和优化数据库结构，编写高效的SQL查询语句。我熟悉数据库索引优化、事务管理和存储过程开发，能够处理复杂的数据关系和查询需求。在项目中，我负责数据库架构设计和性能调优，确保数据的安全性和系统的高效运行。</p>
                    
                    <h3>开发工具</h3>
                    <p>我熟练使用Git进行版本控制，能够有效地管理代码库、分支和合并操作。我掌握Docker容器化技术，能够使用Dockerfile构建镜像，通过Docker Compose编排多容器应用。我还熟悉CI/CD概念，了解自动化测试和部署流程。
                </div>
                
                <div class="section">
                    <h2>个人优势</h2>
                    <ul>
                        <li>扎实的计算机基础知识和编程技能</li>
                        <li>优秀的团队协作和沟通能力，作为班长具备良好的组织管理能力</li>
                        <li>较强的自学能力和解决问题的能力，能够快速适应新技术和环境</li>
                        <li>严谨的工作态度和责任心，注重代码质量和用户体验</li>
                        <li>积极向上的学习态度，不断追求技术创新和个人成长</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>